```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chrome 插件开发完全指南</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            background-color: #f8fafc;
            color: #1e293b;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #d946ef 100%);
        }
        .feature-card {
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        }
        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
        }
        .code-block {
            background-color: #1e293b;
            color: #e2e8f0;
            border-radius: 0.5rem;
            position: relative;
        }
        .code-header {
            background-color: #334155;
            border-top-left-radius: 0.5rem;
            border-top-right-radius: 0.5rem;
            padding: 0.5rem 1rem;
            display: flex;
            align-items: center;
        }
        .code-title {
            font-family: 'Noto Sans SC', sans-serif;
            font-weight: 500;
            color: #94a3b8;
        }
        .code-dots {
            display: flex;
            margin-right: 0.75rem;
        }
        .code-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            margin-right: 6px;
        }
        .dot-red {
            background-color: #f87171;
        }
        .dot-yellow {
            background-color: #fbbf24;
        }
        .dot-green {
            background-color: #34d399;
        }
        .mermaid-container {
            background-color: white;
            border-radius: 0.5rem;
            padding: 1.5rem;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        }
        .highlight {
            position: relative;
        }
        .highlight::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 30%;
            background-color: rgba(139, 92, 246, 0.2);
            z-index: -1;
        }
        .tooltip {
            position: relative;
            display: inline-block;
        }
        .tooltip .tooltip-text {
            visibility: hidden;
            width: 200px;
            background-color: #334155;
            color: #fff;
            text-align: center;
            border-radius: 6px;
            padding: 8px;
            position: absolute;
            z-index: 1;
            bottom: 125%;
            left: 50%;
            transform: translateX(-50%);
            opacity: 0;
            transition: opacity 0.3s;
            font-size: 14px;
        }
        .tooltip:hover .tooltip-text {
            visibility: visible;
            opacity: 1;
        }
        .scroll-indicator {
            position: absolute;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            animation: bounce 2s infinite;
        }
        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% {
                transform: translateY(0) translateX(-50%);
            }
            40% {
                transform: translateY(-20px) translateX(-50%);
            }
            60% {
                transform: translateY(-10px) translateX(-50%);
            }
        }
    </style>
</head>
<body>
    <!-- Hero Section -->
    <div class="hero-gradient min-h-screen flex flex-col justify-center items-center text-white px-6 relative overflow-hidden">
        <div class="max-w-4xl mx-auto text-center px-4 py-20">
            <h1 class="text-4xl md:text-6xl font-bold mb-6 font-serif tracking-tight">
                Chrome 插件开发<span class="highlight">完全指南</span>
            </h1>
            <p class="text-xl md:text-2xl mb-10 max-w-3xl mx-auto leading-relaxed">
                从零开始构建功能强大的浏览器扩展，提升您的Web开发技能
            </p>
            <div class="flex flex-wrap justify-center gap-4">
                <a href="#basics" class="bg-white text-indigo-600 hover:bg-indigo-100 px-6 py-3 rounded-full font-medium transition-all duration-300 transform hover:scale-105">
                    <i class="fas fa-book mr-2"></i> 开始学习
                </a>
                <a href="#example" class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-full font-medium border border-white transition-all duration-300 transform hover:scale-105">
                    <i class="fas fa-code mr-2"></i> 查看示例
                </a>
            </div>
        </div>
        <div class="scroll-indicator">
            <i class="fas fa-chevron-down text-2xl opacity-70"></i>
        </div>
        <div class="absolute -bottom-20 -left-20 w-64 h-64 bg-indigo-400 rounded-full opacity-20"></div>
        <div class="absolute -top-20 -right-20 w-80 h-80 bg-purple-400 rounded-full opacity-20"></div>
    </div>

    <!-- Main Content -->
    <div class="max-w-6xl mx-auto px-6 py-16">
        <!-- Basics Section -->
        <section id="basics" class="mb-20 scroll-mt-20">
            <div class="flex items-center mb-10">
                <div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center mr-4">
                    <i class="fas fa-cubes text-indigo-600 text-xl"></i>
                </div>
                <h2 class="text-3xl font-bold text-gray-800 font-serif">
                    1. <span class="text-indigo-600">基础知识</span>
                </h2>
            </div>
            
            <p class="text-lg text-gray-700 mb-8 leading-relaxed">
                Chrome 插件（扩展）本质上是一个包含 HTML、CSS 和 JavaScript 文件的压缩包，可以扩展 Chrome 浏览器的功能。一个典型的扩展由以下组件构成：
            </p>
            
            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mb-10">
                <div class="feature-card bg-white p-6 rounded-xl border border-gray-100">
                    <div class="w-10 h-10 bg-indigo-100 rounded-lg flex items-center justify-center mb-4">
                        <i class="fas fa-file-code text-indigo-600"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-2">manifest.json</h3>
                    <p class="text-gray-600">配置文件，描述扩展的属性和权限</p>
                </div>
                
                <div class="feature-card bg-white p-6 rounded-xl border border-gray-100">
                    <div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
                        <i class="fas fa-window-maximize text-purple-600"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-2">popup</h3>
                    <p class="text-gray-600">点击扩展图标显示的弹出窗口</p>
                </div>
                
                <div class="feature-card bg-white p-6 rounded-xl border border-gray-100">
                    <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
                        <i class="fas fa-server text-blue-600"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-2">background script</h3>
                    <p class="text-gray-600">在后台运行的脚本</p>
                </div>
                
                <div class="feature-card bg-white p-6 rounded-xl border border-gray-100">
                    <div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center mb-4">
                        <i class="fas fa-file-alt text-green-600"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-2">content script</h3>
                    <p class="text-gray-600">可以读取和修改网页内容的脚本</p>
                </div>
                
                <div class="feature-card bg-white p-6 rounded-xl border border-gray-100">
                    <div class="w-10 h-10 bg-yellow-100 rounded-lg flex items-center justify-center mb-4">
                        <i class="fas fa-cog text-yellow-600"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-2">options page</h3>
                    <p class="text-gray-600">用户配置选项的页面</p>
                </div>
            </div>
            
            <div class="mermaid-container mb-10">
                <div class="mermaid">
                    graph TD
                    A[Chrome 扩展] --> B[manifest.json]
                    A --> C[popup.html]
                    A --> D[background.js]
                    A --> E[content.js]
                    A --> F[options.html]
                    C -->|依赖| G[popup.css]
                    C -->|依赖| H[popup.js]
                    F -->|依赖| I[options.css]
                    F -->|依赖| J[options.js]
                    style A fill:#6366f1,stroke:#4f46e5,color:white
                    style B fill:#8b5cf6,stroke:#7c3aed,color:white
                    style C fill:#a78bfa,stroke:#8b5cf6,color:white
                    style D fill:#7c3aed,stroke:#6d28d9,color:white
                    style E fill:#9333ea,stroke:#7e22ce,color:white
                    style F fill:#c084fc,stroke:#a855f7,color:white
                </div>
            </div>
        </section>
        
        <!-- Quick Start Section -->
        <section id="example" class="mb-20 scroll-mt-20">
            <div class="flex items-center mb-10">
                <div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center mr-4">
                    <i class="fas fa-bolt text-indigo-600 text-xl"></i>
                </div>
                <h2 class="text-3xl font-bold text-gray-800 font-serif">
                    2. <span class="text-indigo-600">快速入门示例</span>
                </h2>
            </div>
            
            <h3 class="text-2xl font-bold text-gray-800 mb-6 font-serif">目录结构</h3>
            
            <div class="code-block mb-10">
                <div class="code-header">
                    <div class="code-dots">
                        <div class="code-dot dot-red"></div>
                        <div class="code-dot dot-yellow"></div>
                        <div class="code-dot dot-green"></div>
                    </div>
                    <div class="code-title">目录结构</div>
                </div>
                <pre class="p-4 overflow-x-auto"><code class="text-gray-300">my-extension/                # 插件根目录，包含所有插件文件
  ├── manifest.json          # 插件的配置文件，定义插件的属性、权限和功能
  ├── popup.html             # 点击插件图标时显示的弹出窗口的HTML结构
  ├── popup.js               # 控制弹出窗口行为的JavaScript代码
  ├── popup.css              # 弹出窗口的样式表，定义UI外观
  ├── background.js          # 后台脚本，在浏览器启动后持续运行，处理事件和状态
  ├── content.js             # 内容脚本，注入到网页中执行，可以读取和修改网页内容
  └── icons/                 # 图标目录，存放插件的各种尺寸图标
      ├── icon16.png         # 16x16像素图标，用于扩展管理页面和某些小图标场景
      ├── icon48.png         # 48x48像素图标，用于扩展管理页面和工具栏
      └── icon128.png        # 128x128像素图标，用于Chrome商店和安装过程</code></pre>
            </div>
            
            <h3 class="text-2xl font-bold text-gray-800 mb-6 font-serif">manifest.json</h3>
            
            <div class="code-block mb-10">
                <div class="code-header">
                    <div class="code-dots">
                        <div class="code-dot dot-red"></div>
                        <div class="code-dot dot-yellow"></div>
                        <div class="code-dot dot-green"></div>
                    </div>
                    <div class="code-title">manifest.json</div>
                </div>
                <pre class="p-4 overflow-x-auto"><code class="language-json text-gray-300">{
  "manifest_version": 3,
  "name": "我的第一个扩展",
  "version": "1.0",
  "description": "这是一个简单的Chrome扩展示例",
  "icons": {
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  },
  "action": {
    "default_popup": "popup.html",
    "default_title": "点击打开扩展"
  },
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": ["&lt;all_urls&gt;"],
      "js": ["content.js"]
    }
  ],
  "permissions": ["storage", "activeTab"]
}</code></pre>
            </div>
            
            <div class="grid md:grid-cols-2 gap-6 mb-10">
                <div>
                    <h3 class="text-2xl font-bold text-gray-800 mb-6 font-serif">popup.html</h3>
                    <div class="code-block">
                        <div class="code-header">
                            <div class="code-dots">
                                <div class="code-dot dot-red"></div>
                                <div class="code-dot dot-yellow"></div>
                                <div class="code-dot dot-green"></div>
                            </div>
                            <div class="code-title">popup.html</div>
                        </div>
                        <pre class="p-4 overflow-x-auto"><code class="language-html text-gray-300">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;link rel="stylesheet" href="popup.css"&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;h1&gt;我的扩展&lt;/h1&gt;
  &lt;button id="changeColor"&gt;更改页面背景&lt;/button&gt;
  &lt;script src="popup.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
                    </div>
                </div>
                
                <div>
                    <h3 class="text-2xl font-bold text-gray-800 mb-6 font-serif">popup.js</h3>
                    <div class="code-block">
                        <div class="code-header">
                            <div class="code-dots">
                                <div class="code-dot dot-red"></div>
                                <div class="code-dot dot-yellow"></div>
                                <div class="code-dot dot-green"></div>
                            </div>
                            <div class="code-title">popup.js</div>
                        </div>
                        <pre class="p-4 overflow-x-auto"><code class="language-javascript text-gray-300">document.getElementById('changeColor').addEventListener('click', () =&gt; {
  chrome.tabs.query({active: true, currentWindow: true}, (tabs) =&gt; {
    chrome.tabs.sendMessage(tabs[0].id, {action: "changeBackground"});
  });
});</code></pre>
                    </div>
                </div>
                
                <div>
                    <h3 class="text-2xl font-bold text-gray-800 mb-6 font-serif">content.js</h3>
                    <div class="code-block">
                        <div class="code-header">
                            <div class="code-dots">
                                <div class="code-dot dot-red"></div>
                                <div class="code-dot dot-yellow"></div>
                                <div class="code-dot dot-green"></div>
                            </div>
                            <div class="code-title">content.js</div>
                        </div>
                        <pre class="p-4 overflow-x-auto"><code class="language-javascript text-gray-300">chrome.runtime.onMessage.addListener((message, sender, sendResponse) =&gt; {
  if (message.action === "changeBackground") {
    document.body.style.backgroundColor = '#f0f0f0';
    alert('背景颜色已更改！');
  }
});</code></pre>
                    </div>
                </div>
                
                <div>
                    <h3 class="text-2xl font-bold text-gray-800 mb-6 font-serif">background.js</h3>
                    <div class="code-block">
                        <div class="code-header">
                            <div class="code-dots">
                                <div class="code-dot dot-red"></div>
                                <div class="code-dot dot-yellow"></div>
                                <div class="code-dot dot-green"></div>
                            </div>
                            <div class="code-title">background.js</div>
                        </div>
                        <pre class="p-4 overflow-x-auto"><code class="language-javascript text-gray-300">chrome.runtime.onInstalled.addListener(() =&gt; {
  console.log('扩展已安装');
});</code></pre>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- Development Section -->
        <section id="development" class="mb-20 scroll-mt-20">
            <div class="flex items-center mb-10">
                <div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center mr-4">
                    <i class="fas fa-laptop-code text-indigo-600 text-xl"></i>
                </div>
                <h2 class="text-3xl font-bold text-gray-800 font-serif">
                    3. <span class="text-indigo-600">开发与测试</span>
                </h2>
            </div>
            
            <div class="grid md:grid-cols-3 gap-6 mb-10">
                <div class="feature-card bg-white p-6 rounded-xl border border-gray-100">
                    <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
                        <i class="fas fa-upload text-blue-600"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-2">加载未打包扩展</h3>
                    <ul class="text-gray-600 list-disc pl-5 space-y-1">
                        <li>打开 Chrome，访问 <code class="bg-gray-100 px-1 rounded">chrome://extensions</code></li>
                        <li>打开右上角的"开发者模式"</li>
                        <li>点击"加载已解压的扩展程序"</li>
                        <li>选择你的扩展目录</li>
                    </ul>
                </div>
                
                <div class="feature-card bg-white p-6 rounded-xl border border-gray-100">
                    <div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
                        <i class="fas fa-sync-alt text-purple-600"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-2">重新加载扩展</h3>
                    <ul class="text-gray-600 list-disc pl-5 space-y-1">
                        <li>修改代码后，点击扩展页面中的"重新加载"图标</li>
                        <li>或者按 F5 刷新扩展页面</li>
                    </ul>
                </div>
                
                <div class="feature-card bg-white p-6 rounded-xl border border-gray-100">
                    <div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center mb-4">
                        <i class="fas fa-bug text-green-600"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-2">调试扩展</h3>
                    <ul class="text-gray-600 list-disc pl-5 space-y-1">
                        <li>调试 popup：右键点击扩展图标，选择"检查弹出内容"</li>
                        <li>调试 background：点击扩展页面中的"检查视图 service worker"</li>
                        <li>调试 content script：在页面上右键 -> 检查 -> Console</li>
                    </ul>
                </div>
            </div>
            
            <div class="mermaid-container mb-10">
                <div class="mermaid">
                    flowchart LR
                    A[开发流程] --> B[编写代码]
                    A --> C[测试扩展]
                    A --> D[调试问题]
                    B --> E[manifest.json]
                    B --> F[HTML/CSS/JS]
                    C --> G[加载扩展]
                    C --> H[测试功能]
                    D --> I[检查控制台]
                    D --> J[查看错误]
                    style A fill:#6366f1,stroke:#4f46e5,color:white
                </div>
            </div>
        </section>
        
        <!-- Publishing Section -->
        <section id="publishing" class="mb-20 scroll-mt-20">
            <div class="flex items-center mb-10">
                <div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center mr-4">
                    <i class="fas fa-rocket text-indigo-600 text-xl"></i>
                </div>
                <h2 class="text-3xl font-bold text-gray-800 font-serif">
                    4. <span class="text-indigo-600">发布到 Chrome Web Store</span>
                </h2>
            </div>
            
            <h3 class="text-2xl font-bold text-gray-800 mb-6 font-serif">准备工作</h3>
            
            <div class="grid md:grid-cols-2 gap-6 mb-10">
                <div class="feature-card bg-white p-6 rounded-xl border border-gray-100">
                    <div class="w-10 h-10 bg-yellow-100 rounded-lg flex items-center justify-center mb-4">
                        <i class="fas fa-file-archive text-yellow-600"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-2">创建压缩文件</h3>
                    <ul class="text-gray-600 list-disc pl-5 space-y-1">
                        <li>将扩展目录打包成 .zip 文件</li>
                        <li>确保 ZIP 文件直接包含扩展文件，而不是包含扩展目录</li>
                    </ul>
                </div>
                
                <div class="feature-card bg-white p-6 rounded-xl border border-gray-100">
                    <div class="w-10 h-10 bg-indigo-100 rounded-lg flex items-center justify-center mb-4">
                        <i class="fas fa-images text-indigo-600"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-2">准备素材</h3>
                    <ul class="text-gray-600 list-disc pl-5 space-y-1">
                        <li>高分辨率图标（128x128）</li>
                        <li>至少一张 1280x800 或 640x400 的截图</li>
                        <li>简明的说明文本</li>
                        <li>隐私政策（如需要）</li>
                    </ul>
                </div>
            </div>
            
            <h3 class="text-2xl font-bold text-gray-800 mb-6 font-serif">图标生成工具</h3>
            
            <div class="bg-white rounded-xl border border-gray-100 overflow-hidden mb-10">
                <div class="p-6">
                    <h3 class="text-xl font-bold mb-4">插件图标生成器</h3>
                    <p class="text-gray-600 mb-6">点击下方按钮生成图标</p>
                    <button id="generate-btn" class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-2 rounded-full font-medium transition-all duration-300 transform hover:scale-105">
                        生成所有图标
                    </button>
                    
                    <div class="flex justify-between mt-8">
                        <div class="text-center">
                            <canvas id="canvas16" width="16" height="16" class="mx-auto mb-2 border border-gray-200"></canvas>
                            <p>16×16</p>
                        </div>
                        <div class="text-center">
                            <canvas id="canvas32" width="32" height="32" class="mx-auto mb-2 border border-gray-200"></canvas>
                            <p>32×32</p>
                        </div>
                        <div class="text-center">
                            <canvas id="canvas48" width="48" height="48" class="mx-auto mb-2 border border-gray-200"></canvas>
                            <p>48×48</p>
                        </div>
                        <div class="text-center">
                            <canvas id="canvas128" width="128" height="128" class="mx-auto mb-2 border border-gray-200"></canvas>
                            <p>128×128</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <h3 class="text-2xl font-bold text-gray-800 mb-6 font-serif">发布步骤</h3>
            
            <div class="space-y-6 mb-10">
                <div class="feature-card bg-white p-6 rounded-xl border border-gray-100">
                    <div class="flex items-start">
                        <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center mr-4 flex-shrink-0">
                            <span class="text-blue-600 font-bold">1</span>
                        </div>
                        <div>
                            <h3 class="text-xl font-bold mb-2">创建开发者账号</h3>
                            <ul class="text-gray-600 list-disc pl-5 space-y-1">
                                <li>访问 <a href="https://chrome.google.com/webstore/devconsole/" class="text-indigo-600 hover:underline">Chrome Web Store 开发者控制台</a></li>
                                <li>使用 Google 账号登录</li>
                                <li>支付一次性注册费（$5 美元）</li>
                            </ul>
                        </div>
                    </div>
                </div>
                
                <div class="feature-card bg-white p-6 rounded-xl border border-gray-100">
                    <div class="flex items-start">
                        <div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center mr-4 flex-shrink-0">
                            <span class="text-purple-600 font-bold">2</span>
                        </div>
                        <div>
                            <h3 class="text-xl font-bold mb-2">提交扩展</h3>
                            <ul class="text-gray-600 list-disc pl-5 space-y-1">
                                <li>点击"新增项目"按钮</li>
                                <li>上传 ZIP 文件</li>
                                <li>填写项目详情：名称和说明、分类、语言、上传截图和图标、隐私说明</li>
                                <li>支付发布费用（如适用）</li>
                            </ul>
                        </div>
                    </div>
                </div>
                
                <div class="feature-card bg-white p-6 rounded-xl border border-gray-100">
                    <div class="flex items-start">
                        <div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center mr-4 flex-shrink-0">
                            <span class="text-green-600 font-bold">3</span>
                        </div>
                        <div>
                            <h3 class="text-xl font-bold mb-2">等待审核</h3>
                            <ul class="text-gray-600 list-disc pl-5 space-y-1">
                                <li>提交后进入审核队列</li>
                                <li>审核时间通常为几天到两周不等</li>
                                <li>审核通过后扩展将自动发布</li>
                            </ul>
                        </div>
                    </div>
                </div>
                
                <div class="feature-card bg-white p-6 rounded-xl border border-gray-100">
                    <div class="flex items-start">
                        <div class="w-10 h-10 bg-yellow-100 rounded-lg flex items-center justify-center mr-4 flex-shrink-0">
                            <span class="text-yellow-600 font-bold">4</span>
                        </div>
                        <div>
                            <h3 class="text-xl font-bold mb-2">更新扩展</h3>
                            <ul class="text-gray-600 list-disc pl-5 space-y-1">
                                <li>更新版本号（manifest.json 中的 version 字段）</li>
                                <li>重新打包并上传</li>
                                <li>填写更新日志</li>
                                <li>重新提交审核</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- Considerations Section -->
        <section id="considerations" class="mb-10 scroll-mt-20">
            <div class="flex items-center mb-10">
                <div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center mr-4">
                    <i class="fas fa-exclamation-triangle text-indigo-600 text-xl"></i>
                </div>
                <h2 class="text-3xl font-bold text-gray-800 font-serif">
                    5. <span class="text-indigo-600">注意事项</span>
                </h2>
            </div>
            
            <div class="bg-white rounded-xl border border-gray-100 p-6">
                <ul class="space-y-4">
                    <li class="flex">
                        <div class="flex-shrink-0 mt-1">
                            <div class="w-6 h-6 bg-green-100 rounded-full flex items-center justify-center mr-3">
                                <i class="fas fa-shield-alt text-green-600 text-xs"></i>
                            </div>
                        </div>
                        <div>
                            <h3 class="font-bold text-gray-800">严格遵循最小权限原则</h3>
                            <p class="text-gray-600">只请求必要的权限，避免过度请求可能引起用户疑虑的权限</p>
                        </div>
                    </li>
                    
                    <li class="flex">
                        <div class="flex-shrink-0 mt-1">
                            <div class="w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center mr-3">
                                <i class="fas fa-book text-blue-600 text-xs"></i>
                            </div>
                        </div>
                        <div>
                            <h3 class="font-bold text-gray-800">遵守 Chrome Web Store 的政策</h3>
                            <p class="text-gray-600">确保扩展内容符合Google的政策要求，避免被下架</p>
                        </div>
                    </li>
                    
                    <li class="flex">
                        <div class="flex-shrink-0 mt-1">
                            <div class="w-6 h-6 bg-purple-100 rounded-full flex items-center justify-center mr-3">
                                <i class="fas fa-user text-purple-600 text-xs"></i>
                            </div>
                        </div>
                        <div>
                            <h3 class="font-bold text-gray-800">维护良好的用户体验</h3>
                            <p class="text-gray-600">确保扩展不会降低浏览性能或干扰用户正常浏览</p>
                        </div>
                    </li>
                    
                    <li class="flex">
                        <div class="flex-shrink-0 mt-1">
                            <div class="w-6 h-6 bg-yellow-100 rounded-full flex items-center justify-center mr-3">
                                <i class="fas fa-sync-alt text-yellow-600 text-xs"></i>
                            </div>
                        </div>
                        <div>
                            <h3 class="font-bold text-gray-800">定期更新扩展</h3>
                            <p class="text-gray-600">及时修复漏洞和兼容性问题，保持与浏览器版本的同步</p>
                        </div>
                    </li>
                    
                    <li class="flex">
                        <div class="flex-shrink-0 mt-1">
                            <div class="w-6 h-6 bg-red-100 rounded-full flex items-center justify-center mr-3">
                                <i class="fas fa-lock text-red-600 text-xs"></i>
                            </div>
                        </div>
                        <div>
                            <h3 class="font-bold text-gray-800">提供清晰的隐私政策</h3>
                            <p class="text-gray-600">明确说明数据收集和使用方式，建立用户信任</p>
                        </div>
                    </li>
                </ul>
            </div>
        </section>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <script>
        // 初始化Mermaid
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: false,
                htmlLabels: true,
                curve: 'basis'
            }
        });
        
        // 生成单个图标
        function createIcon(size) {
            const canvas = document.getElementById(`canvas${size}`);
            const ctx = canvas.getContext('2d');

            // 背景
            const gradient = ctx.createLinearGradient(0, 0, size, size);
            gradient.addColorStop(0, '#4285F4');
            gradient.addColorStop(1, '#34A853');
            ctx.fillStyle = gradient;
            ctx.fillRect(0, 0, size, size);

            // 边框
            ctx.strokeStyle = 'white';
            ctx.lineWidth = size / 16;
            ctx.strokeRect(size / 8, size / 8, size * 6 / 8, size * 6 / 8);

            // 文字
            ctx.fillStyle = 'white';
            ctx.font = `bold ${size * 0.5}px Arial`;
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            ctx.fillText('S', size / 2, size / 2);

            return canvas;
        }

        // 下载所有图标
        function downloadIcons() {
            [16, 32, 48, 128].forEach(size => {
                const canvas = createIcon(size);
                const imgData = canvas.toDataURL('image/png');

                const a = document.createElement('a');
                a.href = imgData;
                a.download = `icon${size}.png`;
                a.click();
            });

            alert('图标已生成，请检查下载文件夹!');
        }

        // 初始化
        document.addEventListener('DOMContentLoaded', () => {
            [16, 32, 48, 128].forEach(size => {
                createIcon(size);
            });

            document.getElementById('generate-btn').addEventListener('click', downloadIcons);
            
            // 平滑滚动
            document.querySelectorAll('a[href^="#"]').forEach(anchor => {
                anchor.addEventListener('click', function (e) {
                    e.preventDefault();
                    document.querySelector(this.getAttribute('href')).scrollIntoView({
                        behavior: 'smooth'
                    });
                });
            });
        });
    </script>
</body>
</html>
```